<template>
    <div class="profile-name">
        <template v-if="this.$route.query.type === 'real'">
            <div class="name-real">
                <m-input title="用户名" placeholder="1-12个字符" v-model="name.real"></m-input>
            </div>
        </template>
        <template v-if="this.$route.query.type === 'nick'">
            <div class="name-nick">
                <m-input title="昵称" placeholder="1-12个字符" v-model="name.nick"></m-input>
            </div>
        </template>
        <div class="name-btn">
            <m-button value="修改" @click.native="updateName"></m-button>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: {
                    real: "",
                    nick: ""
                }
            };
        },
        methods: {
            updateName() {
                const self = this;
                let data = {
                    type: this.$route.query.type + "Name",
                    value: this.name[this.$route.query.type]
                };
                this.$http.userEdit(data).then(
                    res => {
                        if (res.success === true) {
                            const info = {
                                name: this.$route.query.type + "Name",
                                value: this.name[this.$route.query.type]
                            };
                            self.$store.dispatch("updateUserInfo", info);
                            self.$mToast("修改成功");
                            self.back();
                        }
                    },
                    error => {
                    }
                );
            }
        }
    };
</script>

<style lang="less" scoped>
    .profile-name {
        .name-real {
            padding: 20px 10px;
            background: white;
        }
        .name-nick {
            padding: 20px 10px;
            background: white;
        }
        .name-btn {
            margin: 30px auto 0px auto;
        }
    }
</style>